/**
 * 
 * 客户列表
 * 
 * */
import React, { useCallback, useMemo, useState, useEffect } from 'react';
import Header from '@/component/layout/Header/Header';
import ListTitle from "@/component/layout/ListTitle/ListTitle";
import CommonList from '@/component/common/CommonList/CommonList';
import { connect } from 'react-redux';
import { getSaleList, getDoctorList } from '@/network/protocol';
import { PickerView } from 'antd-mobile';
import { withRouter } from "react-router-dom";
import { area } from '@/util/region'
import { getSaleDetail, getManagerDetail, getDoctorDetail } from '@/network/protocol';

import './style.less';

const methodList = ['', getManagerDetail, getSaleDetail, getDoctorDetail];

// console.log(area)

const img1 = <img alt="" className="edit" src={require('../../assests/img/edit.png')} />
const pageSize = 20;

const CustomerList = (props) => {
  //  区域经理1 -- 销售列表2 -- 医生
  const { user, history } = props;
  const { user: { role, userId } } = props;
  const [param, setParam] = useState({ pageIndex: 1, pageSize })
  const [area1, setArea1] = useState([])
  const [value, setValue] = useState([]); // 用于默认区域列表的value
  const [value1, setValue1] = useState('') // 用于协议用的

  const [show, setShow] = useState(false);

  const param1 = useMemo(() => {
    return {
      ...param,
      city: value1
    }
  }, [param, value1])

  const method = useMemo(() => {
    let role = user.role || 1;
    return [getSaleList, getDoctorList][role - 1]
  }, [user.role])

  const update = useCallback(() => {
    setParam({ ...param, pageIndex: param.pageIndex + 1 })
  }, [param])


  const SaleList = useCallback((props) => {
    const { data } = props;

    return <div className="Customer-list-item-itembox">
      <div className="Customer-list-item" onClick={() => history.push('/docList?id=' + data.userId)}>
        <p className="p1">
          <span >姓名：<span className="p1-name">{data.name}</span></span>
          <span>区域：{data.area}</span>
        </p>
        <p className="p2">
          <span>省市：{data.province}</span>
          <span>电话：{data.telephone}</span>
        </p>
      </div>
      <p className="link-p"
      >
        <span onClick={() => history.push('/memo?id=' + data.userId)}>查看该销售的每日一记 >></span>
      </p>
    </div>


  }, [history])

  const DocList = useCallback((props) => {
    const { data } = props;
    return <div className="Customer-list-item-itembox">
      <div className="Customer-list-item">
        <p className="p1">
          <span>姓名：{data.name || '--'}</span>
          <span>医院：{data.hospital || '--'}</span>
        </p>
        <p className="p2">
          <span>级别：{data.level || '--'}</span>
          <span>电话：{data.telephone || '--'}</span>
        </p>
      </div>
    </div>
  }, [])

  const TextMap = useMemo(() => {
    return ['销售列表', '医生列表'][user.role - 1]
  }, [user.role])

  const ViewMap = useMemo(() => {
    return [SaleList, DocList][user.role - 1]
  }, [DocList, SaleList, user.role])

  const onChange = useCallback((e) => {
    setShow(false)
    setValue1(e[e.length - 1] === '全部' ? e[1] : e[e.length - 1])
    setValue(e)
  }, [])

  const findOne = useCallback((arr) => {
    if (arr && arr.length > 0) return arr[0].value
    else return ''
  }, [])

  const getPerson = useCallback(async () => {
    if (role != '3') {
      let method1 = methodList[role];
      let user1 = await method1(userId)
      if (user1.errorCode === 0) {
        let aread = user1.source.area;
        // let aread = '中枢神经鲁豫大区';
        if (role == '1') {
          let ar = area.filter(item => item.name === aread);
          let v = [findOne(ar)]
          if (ar[0] && ar[0].children) v.push(findOne(ar[0].children))
          if (ar[0] && ar[0].children && ar[0].children[0]) v.push(findOne(ar[0].children[0].children))
          v = v.filter(item => item !== '');
          let v1 = v[v.length - 1]
          setValue([...v])
          setArea1([...ar])
          // setValue1(v1)
        }
      }
    }
  }, [findOne, role, userId])



  useEffect(() => {
    getPerson()
  }, [getPerson])

  return <>
    <Header center={<span>客户管理</span>} />
    <div className="global-content CustomerList-box">
      <div className="header-box">
        <ListTitle img={img1} text={TextMap} />
        <div className="select-box" onClick={() => setShow(true)}>
          <p>{value1 ? value1 : '全部'}</p>
          <img src={require('../../assests/img/down.png')} alt="" />
        </div>
      </div>
      <div className="list-box">
        <CommonList update={update} mapkey={"userId"} viewCmp={ViewMap} param={param1} method={method} />
      </div>
      {show && <div className="PickerView-box" onClick={() => setShow(false)}></div>}
      {show &&
        <div className="PickerView-b">
          <PickerView
            onChange={onChange}
            value={value}
            data={area1}
            cols={3}
            onOk={() => { debugger }}
          />
        </div>
      }
    </div>
  </>

}

const mapStateToProps = state => {
  return {
    user: state.user
  }
}


export default connect(mapStateToProps, null)(withRouter(CustomerList));
